<template>
	<div class="monitoring-center-card" :style="cBgImg">
		<div class="header" :style="cHeaderBgImg">
			<p>
				<global-svg-icon
					v-if="props.iconName"
					:icon-name="props.iconName"
					:width="props.width"
					:height="props.height"
					style="margin-right: 12px"
					:style="{ verticalAlign: verticalAlign }"
				></global-svg-icon>
				<span>{{ props.title }}</span>

				<span class="rank"><slot name="Header-Left"></slot></span>
			</p>
			<div><slot name="Header-Right"></slot></div>
		</div>
		<slot name="Content"></slot>
	</div>
</template>

<script setup lang="ts" name="Monitoring-Center-Card">
type TsProps = {
	title: string;
	iconName?: string; // 头部icon名字
	headerBg?: string; // 头部背景图
	baImg?: string; // 背景图片
	width?: string;
	height?: string;
	verticalAlign?: string;
};
const props = withDefaults(defineProps<TsProps>(), {
	title: '默认',
	iconName: '',
	headerBg: '',
	baImg: '',
	width: '',
	height: '',
	verticalAlign: 'text-bottom'
});

const cBgImg = computed(() => {
	let obj = { backgroundImage: `url(${props.baImg})` };
	return props.baImg ? obj : {};
});
const cHeaderBgImg = computed(() => {
	let obj = { backgroundImage: `url(${props.headerBg})` };
	return props.headerBg ? obj : {};
});
</script>

<style lang="less" scoped>
.monitoring-center-card {
	overflow: hidden;
	width: 100%;
	height: 100%;
	border: 1px solid @borderColor01;
	border-radius: 8px;
	background: no-repeat center;
	background-size: cover;

	.header {
		display: flex;
		height: 51px;
		padding: 8px 12px 0;
		background: no-repeat center;
		background-size: 100% 100%;
		justify-content: space-between;

		> p {
			> span {
				font-family: Noto Sans SC;
				font-size: 16px;
				font-weight: 700;
				line-height: 24px;
				color: #fff;
			}

			.rank {
				margin-left: 12px;
				font-weight: 400;
				color: @text03;
			}
		}
	}
}
</style>
